$bg:#eee;
body{
  *{
    margin: 0;
    padding: 0;
  }
  background: $bg;
  width:100%;
  .head{
    width:100%;
    height:51px;
    background: #404040;
    color:white;display: flex;
    justify-content:space-around;
    .logo{
      height:50px;
      line-height: 50px;
    }
  }
  .content{
    width:100%;
    .btn{
      width:400px;
      margin: 50px auto;
      text-align: center;
      button{
        margin: 5px;
        padding:5px;
      }
    }

    .tab{
      width:700px;
      margin: 0 auto;
      border:1px solid red;
      .table{

        thead{
          background-color: #404040;
          th{
            justify-content: space-around;
            border:0.5px solid deepskyblue;
            color:white;
            width:100px;
          }
        }
      }
      .tables{
         width:700px;
         margin: 0 auto;
        tr{
          //background: black;
        }
        td{
          width:100px;
          border:1px solid black;
          text-align: center;
        }
       }
    }

    .mask{
      width:100%;
      height:100%;
      position: fixed;
      display: none;
      top:51px;
      left:0;
      background: rgba(0,0,0,0.3);
      .list{
        width:600px;
        height:500px;
        border-radius: 30px;
        background: $bg;
        position: absolute;
        top:50px;
        left:50%;

        transform: translate(-50%,0);
        @mixin input{
          width:180px;
          height:30px;
          float: right;
          margin-right: 10px;
          margin-top: 10px;
         }
        $p:280px;
        @mixin p{
          width:$p;
          text-align: center;
          line-height: 50px;
          color:white;
        }
        .Shead{
          background: deepskyblue;
          color:rebeccapurple;
          display: flex;
          justify-content: space-between;
          height:31px;
          line-height:31px;
          padding: 5px;
        }
        .bookLeft{
          float: left;
          background: #404040;
          >p{
            @include p;
            input{
              @include input;
            }
          };
        }
        .bookRight{
          margin-left: 280px;
          background: #404040;
          >p{
            @include p;
            input{
              @include input;
            }
          }
        }
        .add{
          padding: 5px;
          margin-left: 450px;
          margin-top: 10px;
          background: deepskyblue;
        }
      }
    }
  }

}